<template>
	<view class="evaluate-box">
		<view class="eva-section">
			<view class="e-header" v-show="showHeader">
				<view class="evaluate-title">用户评价({{ productComment || '0' }})</view>
				<view class="tip" @click="$emit('lookAllEvaluation',showHeader)">
					<text>查看全部</text>
					<u-icon name="arrow-right" color="#ADB0AE"></u-icon>
				</view>
			</view>
			<view v-if="commDetailList && commDetailList.length > 0">
				<view class="eva-box" v-for="(commItem,commIndex) in commDetailList" :key="commIndex"
					@click="$emit('lookAllEvaluation',showHeader)">
					<view class="section-info">
						<u-avatar mode="circle" size="36" class="portrait" :src="commItem.userImages"></u-avatar>
						<view class="star-con">
							<view class="star-view">
								<text class="name">{{ commItem.nickName }}</text>
								<u-rate activeColor="#EA5404" class="star" size="20" activeIcon="star-fill" :count="5"
									:value="commItem.start" readonly>
								</u-rate>
							</view>
							<text class="time">{{commItem.createTime}}</text>
						</view>
					</view>
					<view class="section-contant">
						<text class="con_1" v-if="showHeader">{{commItem.context}}</text>
						<!-- #ifdef APP-PLUS||H5 -->
						<u-read-more v-else showHeight="60"
							style='width: calc(100% - 32px); padding: 0rpx 32rpx 0rpx 32rpx;' ref="uReadMore"
							color="#000000" closeText="展开">
							<rich-text @load="parseLoaded" :nodes="commItem.context " class="con"></rich-text>
						</u-read-more>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<!-- <rich-text v-else @load="parseLoaded" :nodes="commItem.context " class="con"></rich-text> -->
						<!-- #endif -->
						<view class="imgview" v-if="commItem.commentImgUrl&&showHeader==false">
							<view class="img">
								<image class="commImg" v-for="(item, index) in commItem.commentImgUrl.split(',')"
									:src="item" :key="index"
									@click.stop="previewImg(commItem.commentImgUrl.split(','), index)"></image>
							</view>
						</view>
						<view class="bot">
							<text class="attr">{{ commItem.productName }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="showHeader==true" class="goodsNoMore">
				<u-empty text="该商品暂无评论" mode="message"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	const dialog = require("@/utils/dialog.js");
	export default {
		data() {
			return {
				// 评论集合
				commDetail: {},
				grade: "",
				// 评论分页提交数据
				params: {
					pageNumber: 1,
					pageSize: 10,
					grade: "",
				},

			};
		},
		props: {
			productComment: {
				type: String,
				default: '0'
			},
			showHeader: {
				type: Boolean,
				default: true
			},
			commDetailList: {
				type: Array,
				default: () => {
					return []
				}
			},
		},


		methods: {
			parseLoaded() {
				this.$refs.uReadMore.init();
			},

			/**
			 * 点击图片放大或保存
			 */
			previewImg(url, index) {
				uni.previewImage({
					urls: url,
					indicator: "number",
					current: index,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.commImg {
		// margin-right: 12rpx;
		margin: 10rpx;
		border-radius: 12rpx;
		display: inline-block;


		// width:160rpx; height:160rpx;

		width: 215rpx;
		height: 215rpx;

		margin-left: 10rpx;
		margin-right: 10rpx;


	}

	.eva-section-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 40rpx 50rpx;
		margin: 2px 0 20rpx 0;
		background: #fff;

		text {
			width: 200rpx;
			height: 50rpx;
			font-size: 22rpx;
			line-height: 46rpx;
			text-align: center;
			color: #262626;
			border: 2rpx solid #ededed;
			box-sizing: border-box;
			border-radius: 30px;
		}
	}

	.goodsNoMore {
		padding: 20rpx 0;
		text-align: center;
		color: #f0f0f0;
	}

	.evaluate-box {
		// margin-top:28rpx ;

	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		border-radius: 12rpx;
		background: #fff;

		.e-header {
			padding-left: 32rpx;
			padding-right: 32rpx;
			border-bottom: 4rpx solid #f5f5f5;
			padding-top: 28rpx;
			padding-bottom: 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			font-size: 16rpx;
			color: gray;

			.evaluate-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #3D3A3A;
			}

			.tit {
				font-size: 32rpx;
				color: gray;
				font-weight: 500;
				margin: 0 4rpx;
			}

			.tip {

				display: flex;
				text-align: right;
				color: #ADB0AE;
				font-size: 28rpx;
			}

			.icon-you {
				margin-left: 10rpx;
			}
		}
	}

	.scroll-x {
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;

		overflow-x: auto;
	}

	.imgview {

		width: calc(100% - 22px);
		padding: 0rpx 22rpx 0rpx 22rpx;
		margin-top: 10rpx;
	}

	.eva-box {
		/* 上边 | 右边 | 下边 | 左边 */
		// padding: 20rpx 32rpx 20rpx 32rpx;
		padding: 20rpx 0rpx 20rpx 0rpx;
		border-bottom: 2rpx solid #f2f2f2;

		.section-info {
			display: flex;
			align-items: center;
			flex-direction: row;
			height: 4;
			width: calc(100% - 32px);
			padding: 0rpx 32rpx 0rpx 32rpx;
			// background-color: orange;

			.portrait {
				flex-shrink: 0;
				margin-right: 20rpx;

			}

			/deep/.u-avatar__image {
				border: 0px;
			}

		}

		.star-con {
			width: calc(100% - 46px);
			// background-color: red;

			.star-view {

				display: flex;
				flex-direction: row;


				.name {
					font-weight: 500;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 600;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					color: #3D3A3A;
					margin-right: 20rpx;
				}
			}



			.time {
				font-weight: 400;
				font-size: 26rpx;
				line-height: 30rpx;
				display: flex;
				align-items: center;
				color: #ADB0AE;
			}
		}

		.section-contant {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;

			.con_1 {

				width: calc(100% - 32px);
				padding: 0rpx 32rpx 0rpx 32rpx;

				line-height: 20px;
				color: #3D3A3A;
				font-size: 28rpx;
				text-indent: 0em;
				/* #ifndef APP-PLUS-NVUE */
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				/*设置超过为省略号的行数*/
				overflow: hidden;
				text-align: justify;
				/* #endif */
				/* #ifdef APP-PLUS-NVUE */
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 2;
				/* #endif */
			}

			// 文字
			.con {


				line-height: 20px;
				color: #3D3A3A;
				font-size: 28rpx;
				// padding: 20rpx 0;
				text-indent: 0em;
			}

			.bot {
				width: calc(100% - 32px);
				padding: 0rpx 32rpx 0rpx 32rpx;

				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}
	}

	/deep/.u-read-more__toggle {
		justify-content: flex-end !important;
	}

	/deep/.u-read-more__toggle {
		background-image: none !important;
	}
</style>
